<script lang="ts" setup>
import { reactive, ref } from 'vue'

import LTreeTable from '@/components/layout/LTreeTable.vue'
import AdvancedTable from '@/components/sofastui/AdvancedTable/AdvancedTable.vue'
import AdvancedTree from '@/components/sofastui/AdvancedTree/AdvancedTree.vue'
import EditForm from './components/EditForm.vue'

import { fields, config } from './constant'

const editFormRef = ref()
const advancedTableRef = ref()

const searchFormData = reactive<{
  [key: string]: unknown
}>({})

const treeClick = (data: { label: string }) => {
  searchFormData.parentId = data.label
  console.log(data)
}

// 创建
const handelAdd = () => {
  editFormRef.value?.show('add', {})
}

// 行展开
const handelRowExpand = (data: { [key: string]: unknown }) => {
  editFormRef.value?.show('update', data)
}

// 刷新表格数据
const refreshTableData = () => {
  advancedTableRef.value!.refresh()
}
</script>

<template>
  <LTreeTable>
    <template #tree>
      <AdvancedTree
        :config="{
          url: '/api/idt/org/tree',
          method: 'get',
        }"
        :tree-props="{
          label: 'name',
        }"
        @node-click="treeClick"
      />
    </template>

    <template #table>
      <AdvancedTable
        ref="advancedTableRef"
        :fields="fields"
        :config="config"
        :query="searchFormData"
        @add="handelAdd"
        @rowExpand="handelRowExpand"
      />
    </template>
  </LTreeTable>
  <!-- 修改表单 -->
  <EditForm ref="editFormRef" @success="refreshTableData" />
</template>
